<template>
    <div class="textarea-box">
		<h3>发表评论</h3>
		<textarea name="" :placeholder="tips" v-model="commentText"></textarea>
        <div class="edit">
            <van-button size="mini" type="default" @click="cancelComment" :disabled="!type || type === 0">取消</van-button>
            <van-button size="mini" type="default" @click="addComment" :disabled="commentText.length === 0">评论</van-button>
        </div>
	</div>
</template>

<script>
import URL from '@/ServiceAPI.config.js';
import userStorage from '@/utils/userStorage';
    export default {
        data: function(){
            return {
                commentText: "", // 评论内容
                tips: '说点儿什么吧~',
                type: 0, // 默认为0：顶级评论；1：二级评论
                pid: 0,  // 默认顶级评论的pid为0
                replyId: 0, // 默认回复的是商品，为顶级评论，为0
                respondent: "", // 被回复人的昵称
                reviewerId: 0, // 被回复人的用户id
            }
        },
        created() {
            console.log(userStorage.getUserInfo());
            console.log(this.reviewerId);
        },
        methods: {
            // 提交评论【可选：顶级评论id，被回复评论id】
            addComment() {
                console.log("提交评论按钮被点击了");
                console.log(this.reviewerId);
                this.$ajax({
                    url: URL.addComment,
                    method: 'POST',
                    data: {
                        content: this.commentText,
                        pid: this.pid,
                        replyId: this.replyId,
                        uid: userStorage.getUserInfo().id,
                        reviewerId: this.reviewerId,
                        goodsId: this.goodsId
                    }
                }).then(res => {
                    if (res.data.code === 200) {
                        this.commentText = "";
                        this.$emit("addSuccess");
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            // 撤销回复他人
            cancelComment() {
                console.log("点击了撤销回复他人按钮");
                this.pid = 0;
                this.replyId = 0;
                this.respondent = "";
            }
        },
        props: [
            "goodsId", 
            "addSuccess", // 添加评论成功后通知父组件
        ],
        watch: {
            respondent(val) {
                if (val.length > 0) {
                    this.tips = `你正在回复 @${this.respondent}`;
                }
            }
        }
    }
</script>

<style scoped lang="scss">
.textarea-box {
    margin: 20px;
    // 标题【评论】
    h3 {
        padding: 5px 0; 
        text-align: left; 
        font-size: 14px;
    }
    // 编辑区域
    textarea {
        box-sizing: border-box;
        padding: 10px;
        overflow: auto; 
        width: 100%; 
        height: 95px;
        outline: none; // 去掉聚焦边框
        resize: none; // 不可拖拽
        border: 1px solid #d8e2f4;
        border-radius: 5px;
        font-size: 12px;
    }
    .edit {
        display: flex;
        justify-content: flex-end;
        font-size: .6rem;
        // 提交按钮，撤销按钮公共样式
        .submit, .cancel {
            width: 2.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            border: 1px solid grey;
            border-radius: .2rem;
            text-align: center;
            box-sizing: border-box;
            background-color: #f1f1f1;
        }
        // 提交取消高亮
        .cancel {
            margin-right: .2rem;
        }
    }
}
</style>